<div class="banner">
	<div class="swiper-container idx-banner">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="../Public/images/banner/1.jpg" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="../Public/images/banner/1.jpg" alt="" />
			</div>
			<div class="swiper-slide">
				<img src="../Public/images/banner/1.jpg" alt="" />
			</div>
		</div>
		<div class="banner-pagination"></div>
		<div class="banner-prev"></div>
		<div class="banner-next"></div>
	</div>
</div>

<div class="wrap">
	<div class="idx-category clearfix">
		<div class="category-item category-1">
			<a href="#" title="Bags">
				<div class="category-title">Package Material</div>
				<div class="category-img"></div>
				<div class="categroy-link"></div>
			</a>
		</div>
		<div class="category-item category-2">
			<a href="#" title="Underwear">
				<div class="category-title">Lingerie / Intimates</div>
				<div class="category-img"></div>
				<div class="categroy-link"></div>
			</a>
		</div>
		<div class="category-item category-3">
			<a href="#" title="Swimming Suit">
				<div class="category-title">Swimwear</div>
				<div class="category-img"></div>
				<div class="categroy-link"></div>
			</a>
		</div>
	</div>

	<div class="idx-hot-products">
		<div class="idx-hot-products-head">
			<h2>Hot Products</h2>
			<ul class="idx-hot-products-tab">
				<li class="cat-tab current" id="0">All</li>
				<volist name="Categorys" id="cats">
					<eq name="cats['parentid']" value="4">
						<li class="line">/</li>
						<li class="cat-tab" id="{$cats.id}">{$cats.catname}</li>
					</eq>
				</volist>
			</ul>
		</div>
		<div class="idx-hot-products-list">
			<div class="idx-hot-products-left">
				
				<div class="swiper-container " id="idx-recommend">
					<div class="swiper-wrapper">
						<div class="swiper-slide">						
							<a href="{$recommend.url}" title="{$recommend.title}" target="_blank" class="idx-recommend-item">
								<img src="/Uploads/201505/556858da9a3e1.jpg" alt=""  onload="app.resizeImg(this);"/>
								<div class="idx-recommend-title">qerqrq qerq rqwrqqerqrq qerq rqwrqqerqrq qerq rqwrqqerqrq qerq rqwrq</div>
							</a>
						</div>
						<div class="swiper-slide">						
							<a href="{$recommend.url}" title="{$recommend.title}" target="_blank" class="idx-recommend-item">
								<img src="/Uploads/201505/556858da3cf28.jpg" alt=""  onload="app.resizeImg(this);"/>
								<div class="idx-recommend-title">qerqrq qerq rqwrq</div>
							</a>
						</div>
						<div class="swiper-slide">						
							<a href="{$recommend.url}" title="{$recommend.title}" target="_blank" class="idx-recommend-item">
								<img src="/Uploads/201505/5558017180487.jpg" alt=""  onload="app.resizeImg(this);"/>
								<div class="idx-recommend-title">qerqrq qerq rqwrq</div>
							</a>
						</div>
					</div>
					<div class="recommend-next"></div>
					<div class="recommend-prev"></div>
				</div>
			
			</div>
			<ul class="clearfix" class="idx-hot-products-items">				
				
				<volist name="hotproduct" id="hotproduct">
					<li class="idx-hot-product-item">
						<a href="{$hotproduct.url}" title="{$recommend.title}" target="_blank">
							<div class="idx-hot-product-img ">
								<img src="{$hotproduct.thumb}" alt="{$recommend.title}" onload="app.resizeImg(this);" />
							</div>
							<div class="idx-hot-product-title">{$hotproduct.title}</div>
						</a>
					</li>					
				</volist>
				
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
</div>

<script src="../Public/js/swiper.min.js"></script>

<script language="javascript"> 
(function($){
	$(function() {
		var mySwiper = new Swiper('.idx-banner',{
			pagination: '.banner-pagination',
			loop:true,
			grabCursor: true,
			paginationClickable: true,
			autoplay : 5000
		});
		$(".banner-prev").on("click",function(e){
			e.preventDefault()
			mySwiper.swipePrev()
		  });
		  $('.banner-next').on('click', function(e){
			e.preventDefault()
			mySwiper.swipeNext()
		  });
		  $(".idx-banner").mouseenter(function(){
		  	$(".banner-prev,.banner-next").stop().fadeIn(300);
		  }).mouseleave(function(){
		  	$(".banner-prev,.banner-next").stop().fadeOut(300);
		  });

		  var recommendSwiper = new Swiper('#idx-recommend',{			
			loop:true,
			autoplayDisableOnInteraction : false,
			preventLinks : true,
			autoplay : 3000
		});
		  $(".recommend-prev").on("click",function(e){
			e.preventDefault()
			recommendSwiper.swipePrev()
		  });
		  $('.recommend-next').on('click', function(e){
			e.preventDefault()
			recommendSwiper.swipeNext()
		  });
		   $("#idx-recommend").mouseenter(function(){
		  	$(".recommend-prev,.recommend-next").stop().fadeIn(300);
		  }).mouseleave(function(){
		  	$(".recommend-prev,.recommend-next").stop().fadeOut(300);
		  });


		  $(".cat-tab").on('click',function(){
		  	var self=$(this),
		  	       cid=self.attr("id");
		  	$.ajax({
		  		url: '{:U("Index/getHotProduct")}',
		  		type: 'POST',
		  		dataType: 'json',
		  		data: {cid: cid},
		  	})
		  	.done(function(data) {
		  		console.log(data);
		  	})
		  	.fail(function() {
		  		console.log("error");
		  	});
		  	
		  	
		  });
		  
	});
})(jQuery);
</script>